<template>
  <div class="app-container order">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="公司名称" prop="orderCo">
        <el-input
          v-model="queryParams.orderCo"
          placeholder="请输入公司名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="负责人" prop="seller" class="treeselect-form">
        <treeselect
          v-model="queryParams.seller"
          :options="userOptions"
          :disable-branch-nodes="true"
          :clearable="true"
          value-format="object"
          placeholder="请选择负责人"
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="状态" prop="state">
        <el-select v-model="queryParams.state" multiple collapse-tags clearable placeholder="请选择订单状态">
          <el-option
            v-for="item in dict.type.work_order_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['work:project:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          v-hasPermi="['work:project:remove']"
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          v-hasPermi="['work:project:export']"
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table
      v-loading="loading"
      :data="planList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" fixed="left" />

      <el-table-column label="订单编号" prop="orderId" align="center" min-width="200">
        <template slot-scope="scope">
          <span class="el-dropdown-link" @click="orderEquDetail(scope.row)">
            {{ scope.row.orderId }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="公司名称" prop="orderCo" align="center" show-overflow-tooltip min-width="200" />

      <el-table-column label="下单日期" prop="orderTime" min-width="150" />

      <el-table-column label="预计交货日期" prop="estimateTime" min-width="150" />

      <el-table-column label="实际发货时间" prop="endTime" min-width="150" />

      <el-table-column label="业务员" prop="seller" min-width="150" />

      <el-table-column label="状态" prop="state" align="center" min-width="100">
        <template slot-scope="scope">
          <span class="el-dropdown-link" @click="handleCommand(scope.row)">
            {{ typeFormat('work_order_type', scope.row.state) || '准备中' }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="位置" prop="position" align="center" min-width="200">
        <template slot-scope="scope">
          <span>
            {{ typeFormat('order_position', scope.row.position) }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="产品问题反馈" prop="rollback" show-overflow-tooltip min-width="200">
        <template slot-scope="scope">
          <div class="tableRemarks" v-html="scope.row.rollback" />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
        <template v-if="scope.row.roleId !== 1" slot-scope="scope">
          <el-button
            v-hasPermi="['work:project:finish']"
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >查看</el-button>
          <el-button
            v-hasPermi="['work:project:finish']"
            size="mini"
            type="text"
            icon="el-icon-user"
            @click="handleGiveBack(scope.row)"
          >反馈</el-button>
          <el-button
            v-hasPermi="['work:project:check']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            v-hasPermi="['work:project:check']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :before-close="cancel"
      :visible.sync="open"
      :close-on-click-modal="false"
      width="1400px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="公司名称" prop="orderCo">
              <el-input v-model="form.orderCo" :disabled="!canEdit" type="input" placeholder="请输入订货公司" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="业务员" prop="seller">
              <treeselect
                v-model="form.seller"
                :disabled="!canEdit"
                :options="userOptions"
                :disable-branch-nodes="true"
                :clearable="true"
                placeholder="请选择订单业务员"
                @input="outerChanges"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="下单日期" prop="orderTime">
              <el-date-picker
                v-model="form.orderTime"
                :disabled="!canEdit"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计交货日期" prop="estimateTime">
              <el-date-picker
                v-model="form.estimateTime"
                :disabled="!canEdit"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际发货时间" prop="time">
              <el-date-picker
                v-model="form.time"
                :disabled="!canEdit"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-for="(item, index) in form.orderEquInformation" :key="item.id" :gutter="10">
          <el-col :span="6">
            <el-form-item
              label="仪器名称"
              :prop="'orderEquInformation.' + index + '.equName'"
              :rules="{ required: true, message: '请输入仪器名称', trigger: 'blur' }"
            >
              <el-input
                v-model="item.equName"
                :disabled="!canEdit"
                type="input"
                placeholder="请输入仪器名称"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="负责人" prop="charge">
              <treeselect
                v-model="item.charge"
                :disabled="!canEdit"
                :options="userOptions"
                :disable-branch-nodes="true"
                :clearable="true"
                placeholder="请选择仪器负责人"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="问题反馈" prop="calls">
              <el-input v-model="item.calls" :disabled="!canEdit" type="input" placeholder="请输入问题反馈" />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="是否计量" prop="isMetering">
              <el-radio-group v-model="item.isMetering" :disabled="!canEdit">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col v-if="canEdit" :span="2">
            <el-button icon="el-icon-plus" circle @click="addPlanItem(item, index)" />
            <el-button v-if="form.orderEquInformation.length > 1" icon="el-icon-minus" circle @click="deletePlanItem(item, index)" />
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="描述" prop="rollback">
              <editor v-model="form.rollback" upload-url="/oa/file/uploadFile" :min-height="192" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="!canEdit" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加流程详情弹窗 -->
    <el-dialog
      title="订单详情"
      :before-close="cancel"
      :visible.sync="openOrderDetail"
      :close-on-click-modal="false"
      width="1000px"
      append-to-body
    >
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="仓库" name="130">
          <el-form ref="ckForm" :model="ckForm" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="出货时间" prop="storeTime" :rules="{ required: true, message: '请选择出货时间', trigger: 'change' }">
                  <el-date-picker
                    v-model="ckForm.storeTime"
                    :disabled="orderDetail.state !== '0'"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="完成状态" prop="storeState" :rules="{ required: true, message: '请选择是否完成', trigger: 'change' }">
                  <el-radio-group v-model="ckForm.storeState" :disabled="orderDetail.state !== '0'">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="备注" prop="storeRemarks">
                  <editor v-model="ckForm.storeRemarks" upload-url="/oa/file/uploadFile" :min-height="192" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="采购" name="126">
          <el-form ref="cgForm" :model="cgForm" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="到货时间" prop="purchaseTime" :rules="{ required: true, message: '请选择到货时间', trigger: 'change' }">
                  <el-date-picker
                    v-model="cgForm.purchaseTime"
                    :disabled="orderDetail.state !== '0'"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="完成状态" prop="purchaseState" :rules="{ required: true, message: '请选择是否完成', trigger: 'change' }">
                  <el-radio-group v-model="cgForm.purchaseState" :disabled="orderDetail.state !== '0'">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="备注" prop="purchaseRemarks">
                  <editor v-model="cgForm.purchaseRemarks" upload-url="/oa/file/uploadFile" :min-height="192" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="生产" name="127">
          <el-form ref="scForm" :model="scForm" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="完成时间" prop="productionTime" :rules="{ required: true, message: '请选择完成时间', trigger: 'change' }">
                  <el-date-picker
                    v-model="scForm.productionTime"
                    :disabled="orderDetail.state !== '0'"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="完成状态" prop="productionState" :rules="{ required: true, message: '请选择是否完成', trigger: 'change' }">
                  <el-radio-group v-model="scForm.productionState" :disabled="orderDetail.state !== '0'">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="备注" prop="productionRemarks">
                  <editor v-model="scForm.productionRemarks" upload-url="/oa/file/uploadFile" :min-height="192" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="技术" name="124">
          <el-form ref="jsForm" :model="jsForm" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="完成时间" prop="techTime" :rules="{ required: true, message: '请选择完成时间', trigger: 'change' }">
                  <el-date-picker
                    v-model="jsForm.techTime"
                    :disabled="orderDetail.state !== '0'"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="完成状态" prop="techState" :rules="{ required: true, message: '请选择是否完成', trigger: 'change' }">
                  <el-radio-group v-model="jsForm.techState" :disabled="orderDetail.state !== '0'">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="备注" prop="techRemarks">
                  <editor v-model="jsForm.techRemarks" upload-url="/oa/file/uploadFile" :min-height="192" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="检测" name="129">
          <el-form ref="jcForm" :model="jcForm" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="完成时间" prop="testTime" :rules="{ required: true, message: '请选择完成时间', trigger: 'change' }">
                  <el-date-picker
                    v-model="jcForm.testTime"
                    :disabled="orderDetail.state !== '0'"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="完成状态" prop="testState" :rules="{ required: true, message: '请选择是否完成', trigger: 'change' }">
                  <el-radio-group v-model="jcForm.testState" :disabled="orderDetail.state !== '0'">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="备注" prop="testRemarks">
                  <editor v-model="jcForm.testRemarks" upload-url="/oa/file/uploadFile" :min-height="192" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <p style="font-size: 16px; font-weight: bold;">部门反馈历史记录表</p>
      <el-table :data="giveBackList" border>
        <el-table-column property="orderId" label="订单编号" fixed="left" align="center" min-width="150" />
        <el-table-column property="remarks" label="反馈信息" align="center" min-width="250" />
        <el-table-column property="uptime" label="反馈时间" align="center" min-width="150" />
        <el-table-column property="uploaderName" label="反馈人员" align="center" min-width="100" />
        <el-table-column property="deptName" label="部门" align="center" min-width="150" />

        <el-table-column property="image" label="附件" align="center" min-width="200">
          <template slot-scope="scope">
            <el-image
              style="width: 70px; height: 70px"
              :src="scope.row.imageList[0]"
              :preview-src-list="scope.row.imageList"
            />
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="orderDetail.state !== '0'" @click="submitDetailForm(activeName)">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 订单仪器列表弹窗 -->
    <el-dialog title="订单仪器列表" :visible.sync="openOrderEquList" width="900px">
      <el-table :data="orderEquList">
        <el-table-column property="orderId" label="订单编号" fixed="left" align="center" min-width="150" />
        <el-table-column property="equName" label="仪器名称" align="center" min-width="200" />
        <el-table-column property="charge" label="负责人" align="center" min-width="150" />
        <el-table-column property="isMetering" label="是否计量" align="center" min-width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.isMetering === '1' ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column property="calls" label="反馈" show-overflow-tooltip min-width="200" />
      </el-table>
    </el-dialog>

    <!-- 订单反馈表单 -->
    <el-dialog title="订单反馈信息" :visible.sync="openOrderGiveBack" :close-on-click-modal="false" width="900px">
      <el-form ref="giveBackForm" :model="giveBackForm" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="反馈信息" prop="remarks" :rules="{ required: true, message: '请输入反馈信息', trigger: 'blur' }">
              <el-input
                v-model="giveBackForm.remarks"
                type="textarea"
                autosize
                placeholder="请输入反馈信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="附件上传" prop="image">
              <FileUpload
                :file-size="100"
                :limit="5"
                :value="fileList"
                upload-url="/oa/file/uploadSingleFile"
                @input="uploadFileChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitGiveBackForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOrder,
  listOrderEqu,
  userDeptTree,
  getOrder,
  getOrderDetail,
  addOrder,
  updateOrder,
  addOrderHistroy,
  updateOrderDetail,
  deleteOrder,
  addOrderDetail,
  giveBackList
} from '@/api/work/order'
import { uploadFile } from '@/api/documentation/management'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'Order',

  components: { Treeselect },

  dicts: ['work_order_type', 'order_position'],

  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      openOrderDetail: false,
      openOrderEquList: false,
      openOrderGiveBack: false,
      activeName: '130',
      // 选中数组
      ids: [],
      // 上传附件列表
      fileList: [],
      fileMap: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      planList: [],
      // 订单仪器列表
      orderEquList: [],
      // 订单反馈列表
      giveBackList: [],
      // 用户树形数据
      userOptions: [],
      // 删除提示
      showHighDelete: false,
      deleteWarning: '',
      roleIds: '',
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      canEdit: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 基础表单参数
      form: {},
      // 回馈表单参数
      giveBackForm: {},
      // 仓库表单参数
      ckForm: {},
      // 采购表单参数
      cgForm: {},
      // 生产表单参数
      scForm: {},
      // 技术表单参数
      jsForm: {},
      // 检测表单参数
      jcForm: {},
      orderDetail: {},
      // 表单校验
      rules: {
        orderCo: [
          { required: true, message: '请输入订货公司', trigger: 'blur' }
        ],
        orderTime: [
          { required: true, message: '请选择下单日期', trigger: 'change' }
        ],
        seller: [
          { required: true, message: '请选择业务员', trigger: 'change' }
        ]
      }
    }
  },

  created() {
    this.getList()
    this.userDeptTree()
  },

  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      const params = {
        ...this.queryParams,
        seller: this.queryParams.seller && this.queryParams.seller.label,
        state: this.queryParams.state && this.queryParams.state.join(',')
      }
      console.log('查询列表参数', params)
      listOrder(params).then(response => {
        this.planList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    // 字典翻译
    typeFormat(type, state) {
      return this.selectDictLabel(this.dict.type[type], state)
    },

    /** 查询部门人员下拉树结构 */
    userDeptTree() {
      userDeptTree().then(response => {
        this.userOptions = this.diGuiTreeEdit(response.data)
      })
    },

    // 禁用最后一级非人员节点
    diGuiTreeEdit(item) {
      const data = item
      const treeAry = []
      for (const i in data) {
        const val = data[i]
        const node = {}
        if (val) {
          if (val.children && val.children.length > 0) {
            node.id = val.id
            node.label = val.label
            node.children = this.diGuiTreeEdit(val.children)
            treeAry.push(node)
          } else {
            if (val.type === '0') {
              node.isDisabled = true
            } else {
              node.isDisabled = false
            }
            node.id = val.id
            node.label = val.label
            treeAry.push(node)
          }
        }
      }
      return treeAry
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.openOrderDetail = false
      this.openOrderGiveBack = false
      this.reset()
    },

    // 表单重置
    reset() {
      this.form = {
        orderCo: undefined,
        seller: undefined,
        orderTime: undefined,
        estimateTime: undefined,
        rollback: undefined,
        time: undefined,
        orderEquInformation: [
          {
            id: new Date().getTime() + '',
            equName: '',
            calls: '',
            isMetering: '1'
          }
        ]
      }
      this.fileList = []
      this.fileMap = []
      this.resetForm('form')
      this.resetForm('giveBackForm')
      this.resetForm('ckForm')
      this.resetForm('cgForm')
      this.resetForm('scForm')
      this.resetForm('jsForm')
      this.resetForm('jcForm')
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection // .map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.canEdit = true
      this.open = true
      this.title = '新建订单'
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      getOrder(row.id).then(response => {
        this.form = {
          ...response.data
        }
        this.canEdit = true
        this.open = true
        this.title = '修改订单'
      })
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.title === '修改订单') {
            const params = {
              ...this.form
            }
            console.log('修改params', params)
            updateOrder(params).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.cancel()
              this.getList()
            })
          } else {
            const params = {
              ...this.form
            }
            console.log('新增params', params)
            addOrder(params).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.cancel()
              this.getList()
            })
          }
        }
      })
    },

    submitDetailForm(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          const params = {
            orderId: this.orderDetail.id,
            ...this[val]
          }

          console.log('订单详情参数', params)
          if (this[val].id) {
            updateOrderDetail(params).then(res => {
              console.log('修改订单详情-----结果', res)
              this.$modal.msgSuccess('操作成功')
              this.cancel()
              this.getList()
            })
          } else {
            addOrderDetail(params).then(res => {
              console.log('新增订单详情-----结果', res)
              this.$modal.msgSuccess('操作成功')
              this.cancel()
              this.getList()
            })
          }
        }
      })
    },

    // 提交反馈订单
    submitGiveBackForm() {
      this.$refs['giveBackForm'].validate(valid => {
        if (valid) {
          if (this.fileList && this.fileList.length > 0) {
            const fileFormData = new FormData()
            for (const val of this.fileMap.values()) {
              console.log('valval', val)
              fileFormData.append('files', val)
            }
            uploadFile(fileFormData).then(res => {
              console.log('上传结果', res)
              const fileList = res.fileName.map((val, index) => {
                return val.fileUrl
              })

              const params = {
                ...this.giveBackForm,
                image: fileList.join(',')
              }
              console.log('订单反馈参数', params)
              addOrderHistroy(params).then(res => {
                console.log('订单反馈-----结果', res)
                this.$modal.msgSuccess('操作成功')
                this.cancel()
                this.getList()
              })
            })
          } else {
            const params = {
              ...this.giveBackForm
            }
            console.log('订单反馈参数', params)
            addOrderHistroy(params).then(res => {
              console.log('订单反馈-----结果', res)
              this.$modal.msgSuccess('操作成功')
              this.cancel()
              this.getList()
            })
          }
        }
      })
    },

    // 反馈
    handleGiveBack(row) {
      this.giveBackForm.orderId = row.orderId
      this.openOrderGiveBack = true
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const roleIds = row.id || this.ids.map(item => item.id)
      const msg = row.orderId || this.ids.map(item => item.orderId)
      this.$modal.confirm('是否确认删除订单编号为"' + msg + '"的订单？').then(function() {
        return deleteOrder(roleIds)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },

    // 修改订单状态
    handleCommand(row) {
      getOrderDetail(row.id).then(res => {
        console.log('修改订单状态', res)
        this.orderDetail = row
        if (res.data) {
          this.ckForm = res.data
          this.cgForm = res.data
          this.scForm = res.data
          this.jsForm = res.data
          this.jcForm = res.data
        }

        this.activeName = '130'
        this.getGiveBackList('130')
        this.openOrderDetail = true
      })
    },

    // 获取反馈历史记录
    getGiveBackList(tabName) {
      giveBackList({ orderId: this.orderDetail.orderId, dept: tabName }).then(res => {
        this.giveBackList = res.rows.map(val => {
          return {
            ...val,
            imageList: val.image.split(',').map(value => {
              return this.baseUrl + value
            })
          }
        })
      })
    },

    tabClick(tab, event) {
      console.log('tab', tab.name)
      this.getGiveBackList(tab.name)
    },

    // 查看详情
    handleDetail(row) {
      this.reset()
      getOrder(row.id).then(response => {
        this.form = {
          ...response.data
        }
        this.canEdit = false
        this.open = true
        this.title = '订单详情'
      })
    },

    // 订单仪器列表弹窗
    orderEquDetail(row) {
      listOrderEqu({ orderId: row.orderId }).then(res => {
        console.log('订单仪器列表', res)
        this.orderEquList = res.rows
        this.openOrderEquList = true
      })
    },

    // 新增、修改负责人变动监听
    outerChanges() {
      console.log('新增、修改负责人变动监听')
      this.$refs['form'].validateField('seller')
    },

    // 上传文件增减
    uploadFileChange(list, map) {
      console.log('上传的文件list', list)
      console.log('上传的文件map', map)
      this.fileList = list
      this.fileMap = map
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('order/information/export', {
        ...this.queryParams
      }, `订单列表_${new Date().getTime()}.xlsx`, 'get', 'local')
    },

    addPlanItem(item, index) {
      console.log('addadd')
      this.form.orderEquInformation.splice(index + 1, 0, {
        id: new Date().getTime() + '',
        equName: '',
        calls: '',
        isMetering: '1'
      })
    },

    deletePlanItem(item, index) {
      this.form.orderEquInformation.splice(index, 1)
    },

    // 跳转到任务管理页面
    goTaskPage() {
      this.$router.push({ path: 'task' })
    }
  }
}
</script>

<style lang="scss" scoped>
.order{
  .tableRemarks {
    max-width: 100px;
    max-height: 100px;

    ::v-deep p {
      margin: 0;
    }
  }

  .tableProjectName {
    color: #46a6ff;
    cursor: pointer;

    &:hover {
      color: hsl(209, 100%, 50%);
    }
  }
}
.el-date-editor {
  width: 100%;
}
</style>
